<template>
  <el-dialog
    :title="title"
    :visible.sync="is_show"
    :close-on-click-modal="false"
    class="dialog-form"
    width="800px"
    @close="resetDialog"
    append-to-body
  >
  <div style="position:relative;height:500px;margin:-30px -20px;">
    <map-box ref="mapBox" :is-pronvince="false" :is-city="true"/>
  </div>
  </el-dialog>
</template>
<script>
import mapBox from '@/components/MapBox';
import mapboxgl from 'mapbox-gl';
export default {
  components:{
    mapBox
  },
  data() {
    return {
      title: '',
      is_show: false,
      row: {},
      map: null,
      marker: null,

    }
  },
  methods: {
    init(row){
      this.row = row;
      this.title = row.name;
      this.form = row;   
      this.is_show = true;
      setTimeout(() => {
        this.map = this.$refs.mapBox.map;
        this.marker = this.$refs.mapBox.marker;      
        this.addMark();
      },1000)
    },
    addMark(){
      if (!this.map) {
        return;
      }
      if (this.marker) {
        this.marker.remove();
        this.marker = undefined;
      }
      this.marker = new mapboxgl.Marker({ color: 'red'});
      this.marker.setLngLat([this.row.lon, this.row.lat]).addTo(this.map);
    },
    resetDialog(){

    }
  },
}
</script>